import React from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Card } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

const list = [
    {
        id: 1,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
    {
        id: 2,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
    {
        id: 3,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
    {
        id: 4,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
    {
        id: 5,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
    {
        id: 6,
        img: 'https://n.sinaimg.cn/sinakd20240520s/97/w1080h617/20240520/cf5c-24b3fc51acd4f6f7ec3893b52e4f7349.png',
        title: '营养食物怎么搭配最好',
        time: '2025-4-18  12:00'
    },
];

export default function Yyang() {
    const navigate = useNavigate();
    return (
        <div style={{ padding: '15px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <LeftOutlined onClick={() => navigate("/index/home")} />
                <div style={{ width: '100%', textAlign: 'center' }}>
                    <h3>营养搭配</h3>
                </div>
            </div>
            <div>
                <Card>
                    <h3>营养知识</h3>
                </Card>
            </div>
            <div>
                {list.map(item => (
                    <div key={item.id}
                        style={{
                            display: 'flex',
                            marginBottom: '10px',
                            padding: '15px'
                        }}
                    >
                        <img src={item.img}
                            style={{
                                width: '150px',
                                height: '100px',
                                objectFit: 'cover',
                                marginRight: '20px',
                                borderRadius: '5px'
                            }}
                            onClick={() => navigate(`/ydetail/${item.id}`)}
                            alt=""
                        />
                        <div>
                            <h3>
                                {item.title}
                            </h3>
                            <div style={{ marginTop: '60px' }}>{item.time}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}    